<template>
	<view class="wangjimima_container">
		<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
		<view class="wangjimima_box">
			<view class="avatar_box">
				<image :src="require('../../static/logo.jpg')" class="img">
			</view>
			<view :model="wangjimimaform" class="wangjimima_form">
				<view class="youxianghaoform">
					<input class="youxianghao" placeholder="请输入邮箱号" v-model="wangjimimaform.youxianghao"
						@input="zuhe" style="font-size: 28rpx;"></input>
					<label>邮箱：</label>
				</view>
				<view class="yanzhengmaform">
					<view class="shurukuang">
						<input class="yanzhengma" placeholder="请输入验证码" v-model="wangjimimaform.yanzhengma"
							@input="isdisabled" style="font-size: 28rpx;"></input>
						<button
							:class="{unsend: wangjimimaform.textcolor === 'blue', havesend: wangjimimaform.textcolor === 'hui'}"
							@click="sendCaptcha" :style="{ display: wangjimimaform.xianshiyincang }"
							:plain="true">{{wangjimimaform.xianshineirong}}</button>
					</view>
					<label>验证码：</label>
				</view>
				<button :class="{ finish: wangjimimaform.isfinish, nofinish: wangjimimaform.nofinish }" @click="verifyCaptcha" v-bind:disabled="wangjimimaform.isable">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wangjimimaform: {
					send: true,
					isable: true,
					isfinish: false,
					nofinish: true,
					textcolor: "blue",
					xianshiyincang: "none",
					youxianghao: "",
					yanzhengma: "",
					auth_time: 0,
					xianshineirong:"发送验证码",
				},
			};
		},
		methods: {
			//发送验证码
			sendCaptcha() {
				uni.request({
					url: this.baseurl + '/captcha/sent',
					method: "POST",
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					data: {
						userId: this.wangjimimaform.youxianghao,
						//type:1修改密码
						type: 1,
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code === 200) {
							//200 成功发送
							uni.showToast({
								title: "发送成功",
								icon: 'none',
								duration: 2000,
							});
						}
						if (res.data.code === 212) {
							//212 邮箱不存在
							uni.showToast({
								title: "邮箱不存在，请注册",
								icon: 'none',
								duration: 2000,
							});
						}
						if (res.data.code === 210) {
							//210 账号一定为邮箱格式
							uni.showToast({
								title: "请输入正确的邮箱",
								icon: 'none',
								duration: 2000,
							});
						}
					}
				})
			},
			//验证验证码是否正确
			verifyCaptcha() {
				uni.request({
					url: this.baseurl + '/captcha/verify',
					method: "POST",
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					data: {
						userId: this.wangjimimaform.youxianghao,
						captcha: parseInt(this.wangjimimaform.yanzhengma),
					},
					success: (res) => {
						if (res.data.code === 200) {
							//200 验证成功
							uni.showToast({
								title: "验证成功",
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								uni.navigateTo({
									url:'./xiugaimima'
										+ '?userId='
										+ this.wangjimimaform.youxianghao
								});
							}, 1000);
						}
						if (res.data.code === 212) {
							//212 邮箱不存在
							//接口部分未实现
							uni.showToast({
								title: "验证码错误，请重新输入",
								icon: 'none',
								duration: 2000,
							});
						}
						if (res.data.code === 213) {
							//213 验证码错误
							uni.showToast({
								title: "验证码错误，请重新输入",
								icon: 'none',
								duration: 2000,
							});
						}
					}
				})
			},			
			back()
			{
				uni.navigateBack({
					url:'./login'
				})
			},
			haveclick() {
				if (this.wangjimimaform.send === true) {
					this.wangjimimaform.textcolor = "hui";
					this.wangjimimaform.send = false;
					this.wangjimimaform.auth_time = 60;
					this.wangjimimaform.xianshineirong="发送验证码(60s)";
					var auth_timetimer = setInterval(() => {
						this.wangjimimaform.auth_time--;
						if(this.wangjimimaform.auth_time>0)
						{
							this.wangjimimaform.xianshineirong="发送验证码";
							this.wangjimimaform.xianshineirong=this.wangjimimaform.xianshineirong+'('+this.wangjimimaform.auth_time+'s)';
						}
						else if(this.wangjimimaform.auth_time===0)
						{
							this.wangjimimaform.xianshineirong="发送验证码";
						}
						if (this.wangjimimaform.auth_time <= 0) {
							this.wangjimimaform.send = true;
							clearInterval(auth_timetimer);
							this.wangjimimaform.textcolor = "blue";
						}
					}, 1000);
				}
			},
			xianshi() {
				var a1 = this.wangjimimaform.youxianghao;
				if (a1 !== "") {
					this.wangjimimaform.xianshiyincang = "";
				} else {
					this.wangjimimaform.xianshiyincang = "none";
				}
			},
			isdisabled() {
				var a2 = this.wangjimimaform.youxianghao;
				var a3 = this.wangjimimaform.yanzhengma;
				if (a2 !== "" && a3 !== "") {
					this.wangjimimaform.isable = false;
					this.wangjimimaform.isfinish = true;
					this.wangjimimaform.nofinish = false;
				} else {
					this.wangjimimaform.isable = true;
					this.wangjimimaform.isfinish = false;
					this.wangjimimaform.nofinish = true;
				}
			},
			zuhe() {
				this.xianshi();
				this.isdisabled();
			}
		},
	};
</script>

<style scoped>
	.wangjimima_container {
		background-color: #c0e9ff;
		height: 100vh;
		width: 100vw;
	}

	.wangjimima_box {
		width: 80vw;
		height: 60vh;
		background-color: #ffffff;
		border-radius: 10%;
		position: relative;
		left: 10vw;
		top: 27vh;
	}

	.avatar_box {
		height: 300rpx;
		width: 300rpx;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 5%;
		box-shadow: 0 0 10px rgb(12, 166, 255);
		position: relative;
		left: 19vw;
		top: -350rpx;
	}
	
	.img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		position: relative;
		left: -2rpx;
		top:-2rpx;
	}
	

	.wangjimima_form {
		width: 100vw;
		height: 100%;
		position: relative;
		width: 100%;
		top: -19.5vh;
		box-sizing: border-box;
	}

	.youxianghaoform {
		cursor: pointer;
		position: relative;
		top: 15vh;
		left: 8.5vw;
	}

	.youxianghao {
		height: 4vh;
		width: 54vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left: -13vw;
		top: -0.9vh;
	}

	.shurukuang {
		height: 4vh;
		width: 54vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top: -2vh;
		left: -8.5vw;
	}

	.yanzhengmaform {
		cursor: pointer;
		position: relative;
		top: 19.5vh;
		left: 4vw;
	}

	.yanzhengma {
		height: 3.5vh;
		width: 54vw;
		float: right;
		border: white;
		position: relative;
		left: 1vw;
		top: 0.1vh;
	}

	.unsend {
		height: 3.5vh;
		width: 35vw;
		color: rgb(0, 164, 240);
		border: white;
		position: relative;
		left: 15vw;
		top: -4.2vh;
		font-size: 10rpx;
	}

	.havesend {
		height: 3.5vh;
		width: 35vw;
		color: #b7b7b7;
		border: white;
		position: relative;
		left: 15vw;
		top: -4.2vh;
		font-size: 10rpx;
	}

	.nofinish {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #bebebe;
		border-radius: 50rpx;
		position: relative;
		top:30vh;
	}

	.finish {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		color: white;
		background-color: #20b0ff;
		position: relative;
		top:30vh;
	}
	.fanhui
	{
		position: relative;
		top:4vh;
		left:4vw;
	}
</style>
